<style lang="less" scoped>
    @import '~assets/less/modules';
</style>
<template>
    <div class="module-container">
        <div v-show="viewShow('list')" class="list-view">
            <Row :gutter="mconst.gutter" class="break-b">
                <Col span="6">
                    <Radio-group v-model="query.states" type="button" @on-change="loadGrid">
                        <Radio label="">{{ mconst.allText }}</Radio>
                        <Radio v-for="(item, index) in mtypes.status" :key="index" :label="item.code">{{ item.name }}</Radio>
                    </Radio-group>
                </Col>
                <Col span="6">
                    <Radio-group v-model="query.sex" type="button" @on-change="loadGrid">
                        <Radio label="">{{ mconst.allText }}</Radio>
                        <Radio v-for="(item, index) in mtypes.sex" :key="index" :label="item.code">{{item.name}}</Radio>
                    </Radio-group>
                </Col>
                <Col offset="4" span="8">
                    <Input v-model="query.keyword.value" placeholder="输入 用户名 / 真实姓名 / 手机 关键字" @on-enter="loadGrid">
                        <Button slot="append" type="primary" icon="ios-search" @click="loadGrid">查询</Button>
                    </Input>
                </Col>
            </Row>
            <Row :gutter="mconst.gutter" class="break-b">
                <Col span="24">
                    <Table :context="self" :columns="columns" :data="data.content | rowsStatesDisabledFilters" ref="grid" @on-selection-change="onSelectedRows" @on-sort-change="onSortRemote"></Table>
                </Col>
            </Row>
            <Row :gutter="mconst.gutter">
                <Col span="16">
                    <Page :total="data.totalElements" :current="query.page+1" :page-size="query.size" @on-change="onChangePage" @on-page-size-change="onChangePageLimit" show-total show-sizer></Page>
                </Col>
                <Col span="8">
                    <div class="btn-group r">
                        <Button :loading="loading" @click.native="onExportExcel">
                            <span v-if="!loading">导出Excel</span>
                            <span v-else>导出中...</span>
                        </Button>
                        <Button type="warning" icon="trash-b" @click.native="onBatchUpdateField('states', mconst.status_disabled, '注销')">批量注销</Button>
                        <Button type="primary" icon="ios-plus-outline" @click.native="onAdd">新增人员</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <div v-show="viewShow('detail')" class="detail-view">
            <Row :gutter="mconst.gutter">
                <Col span="20">
                    <Card>
                        <p slot="title" v-if="detail.addModel"><Icon type="plus-round"></Icon> 新增</p>
                        <p slot="title" v-else><Icon type="edit"></Icon> 编辑</p>
                        <Button slot="extra" type="text" size="small" icon="ios-arrow-back" @click.native="switchListView">返回</Button>
                        <Form ref="modelForm" class="modelForm" :model="detail.model" :rules="detail.rules" label-position="right" :label-width="mconst.labelWidth">
                            <Row :gutter="mconst.gutter">
                                <Col span="8">
                                    <Form-item label="用户名" prop="username">
                                        <Input v-model="detail.model.username" type="text" placeholder="输入登录用户名" :readonly="!detail.addModel"></Input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter" v-if="detail.addModel">
                                <Col span="8">
                                    <Form-item label="登录密码" prop="password">
                                        <Input v-model="detail.model.password" type="password" placeholder="输入登录密码"></Input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="8">
                                    <Form-item label="真实姓名" prop="realname">
                                        <Input v-model="detail.model.realname" type="text" placeholder="输入真实姓名"></Input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="6">
                                    <Form-item label="性别">
                                        <Select v-model="detail.model.sex">
                                            <Option v-for="(item, index) in mtypes.sex" :key="index" :value="item.code">{{ item.name }}</Option>
                                        </Select>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="8">
                                    <Form-item label="手机号码" prop="phone">
                                        <Input v-model="detail.model.phone" type="text" placeholder="输入手机号码"></Input>
                                    </Form-item>
                                </Col>
                                <Col span="8">
                                    <Form-item label="电子邮件" prop="email">
                                        <Input v-model="detail.model.email" type="text" placeholder="输入电子邮件"></Input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="16">
                                    <Form-item label="备注" prop="remark">
                                        <Input v-model="detail.model.remark" type="textarea" :rows="4" placeholder="输入备注信息，不超过100个字"></Input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="6">
                                    <Form-item label="状态">
                                        <Select v-model="detail.model.states">
                                            <Option v-for="(item, index) in mtypes.status" :key="index" :value="item.code">{{ item.name }}</Option>
                                        </Select>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row :gutter="mconst.gutter">
                                <Col span="24">
                                    <Form-item>
                                        <Button type="primary" :loading="detail.loading" icon="checkmark-round" @click.native="onSave">
                                            <span v-if="!detail.loading">提交</span>
                                            <span v-else>提交中...</span>
                                        </Button>
                                        <Button @click.native="switchListView">返回</Button>
                                    </Form-item>
                                </Col>
                            </Row>
                            <div class="avatar-container">
                                <img class="avatar break-b" :src="detail.model.avatar"></img>
                                <Button icon="image" @click.native="onAvatarCrop" long>设置头像</Button>
                            </div>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
        <Modal ref="change_user_pwd_dialog" v-model="extModules.pwdModule.pwdModal" width="360" title="修改密码">
            <Form ref="pwdForm" :model="extModules.pwdModule.pwdForm" :rules="extModules.pwdModule.rules" :label-width="80">
                <Form-item label="新密码" prop="newPassword">
                    <Input v-model="extModules.pwdModule.pwdForm.newPassword" type="password" placeholder="新密码"></Input>
                </Form-item>
                <Form-item label="确认密码" prop="newPassword2">
                    <Input v-model="extModules.pwdModule.pwdForm.newPassword2" type="password" placeholder="确认新密码"></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="text" @click.native="onCancelPwdChange">取消</Button>
                <Button type="primary" icon="checkmark-round" :loading="extModules.pwdModule.pwdLoading" @click.native="onPwdChange">确认</Button>
            </div>
        </Modal>
        <m-dialog ref="deleteMDialog"></m-dialog>
        <x-crop
            v-model="detail.cropShow"
            :width="120"
            :height="120"
            :url="extModules.imgCropUpload.url"
            :headers="extModules.imgCropUpload.headers"
            :params="extModules.imgCropUpload.params"
            @crop-upload-success="cropUploadSuccess">
        </x-crop>
    </div>
</template>
<script>
    import * as constants from 'src/AppConstants'
    import utils from 'commons/utils'
    import modulesMixin from 'mixins/modules_mixins'
    import pwdMixin from 'mixins/pwd_mixins'
    import xcropMixin from 'mixins/xcrop_mixins'

    import config from 'config/config'

    import { BaseSelection, BaseAction } from 'modules/columns/base_columns'
    import { SysUserColumns } from 'modules/columns/sys_columns'
    import { SysUserModel } from 'modules/models/sys_models'
    import { SysUserRules } from 'modules/rules/sys_rules'

    import XCrop from 'components/xcrop'

    export default {
        mixins: [modulesMixin, pwdMixin, xcropMixin],
        data() {
            return {
                moduleRout: '/sys/sysuser',
                query: {
                    states: '',
                    sex: '',
                    keyword: {
                        fields: 'username,realname,phone'
                    }
                },
                columns: [].concat(BaseSelection, SysUserColumns),
                detail: {
                    model: SysUserModel,
                    rules: SysUserRules,
                    cropShow: false
                },
                exportExcel: {
                    filename: '系统用户',
                    renders: {
                        keys: ['sex'],
                        selfs: {
                            states: (row) => {
                                return utils.getNameByCode(constants.STATUS, row.states)
                            }
                        }
                    }
                },
                extModules: {

                }
            }
        },
        methods: {
            onAvatarCrop(){
                this.detail.cropShow = true
            },
            cropUploadSuccess(data, field){
                this.detail.model.avatar = data.url
            },
            clearModel(){
                this.detail.model = Object.assign({},SysUserModel)
            }
        },
        mounted() {
            this.loadGrid()
        }
    }
</script>
